<template>
  <div class="project-purchase-list-container">
    <div class="van-hairline--bottom">
      <van-field
        label="项目名称:"
        label-align="center"
        v-model="projectName"
        placeholder="请输入项目名称"
      />
      <!-- <van-field label="地产名称:" label-align="center" v-model="cusFullName" placeholder="请输入地产名称" /> -->
      <van-field
        label="业务员:"
        label-align="center"
        v-model="nickName"
        placeholder="请输入业务员"
      >
        <template #button>
          <van-button type="info" size="mini" @click="queryBtnClick"
            >查询</van-button
          >
          <van-button type="primary" size="mini" @click="addBtnClick"
            >添加</van-button
          >
        </template>
      </van-field>
    </div>
    <div class="list-container">
      <div
        v-for="item in list"
        :key="item.id"
        class="list-item-container van-hairline--bottom"
        @click="listItemClick(item)"
      >
        <div class="list-item-left-container">
          <div class="list-item-left" style="font-weight: bold">
            {{ item.projectName }}
          </div>
          <div class="list-item-left font-small">{{ item.serialNum }}</div>
          <div class="list-item-left font-small">{{ item.cusFullName }}</div>
          <div class="list-item-left font-small">{{ item.nickName }}</div>
        </div>
        <div class="list-item-center-container">
          <div class="list-item-center">
            {{ item.delFlag == false ? "正常" : "已作废" }}
          </div>
          <div class="list-item-center">
            {{ item.approveStatus | approveStatusFilter }}
          </div>
        </div>
        <div>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <div class="pageContainer">
      <van-pagination
        v-model="pageIndex"
        :total-items="total"
        :items-per-page="10"
        force-ellipses
        @change="pageChange"
      />
    </div>
  </div>
</template>

<script>
import {
  CellGroup,
  Field,
  Col,
  Row,
  Button,
  Pagination,
  Icon,
  Toast,
} from "vant";
import { mapActions, mapMutations } from "vuex";
export default {
  components: {
    [Field.name]: Field,
    [Col.name]: Col,
    [Row.name]: Row,
    [Button.name]: Button,
    [Pagination.name]: Pagination,
    [Icon.name]: Icon,
  },
  data() {
    return {
      nickName: "",
      projectName: "",
      cusFullName: "",
      roleType: "",
      pageIndex: 1,
      total: 0,
      list: [],
      userIdListStr: "",
      userName: "",
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    ...mapMutations({
      setDocsDetail: "projectPurchase/setDocsDetail",
      resetDocsDetail: "projectPurchase/resetDocsDetail",
    }),
    ...mapActions({
      getProjectPurchaseList: "projectPurchase/getProjectPurchaseList",
      getUserIdList: "user/getUserIdList",
    }),
    initData() {
      let ticket = sessionStorage.getItem("ticket");
      console.log(ticket);
      if (ticket) {
        this.getUserIdList(ticket)
          .then((res) => {
            console.log(res);
            if (res.success) {
              this.roleType = res.data.roleType;
              this.userIdListStr = res.data.userIdList || "";
              this.userName = res.data.userName;
              this.getList();
            } else {
              Toast.fail("获取用户信息失败");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        Toast.fail("获取ticket失败");
      }
    },
    getList() {
      this.getProjectPurchaseList({
        pageSize: 10,
        pageIndex: this.pageIndex,
        sortOrder: "asc",
        roleType: this.roleType,
        userIdListStr: this.userIdListStr,
        nickName: this.nickName,
        projectName: this.projectName,
        cusFullName: this.cusFullName,
      })
        .then((res) => {
          this.list = res.res;
          this.total = res.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    queryBtnClick() {
      this.pageIndex = 1;
      this.$nextTick(() => {
        this.getList();
      });
    },
    addBtnClick() {
      this.$router.push({
        name: "projectPurchaseDetail",
        query: {
          type: "add",
        },
      });
    },
    pageChange() {
      this.getList();
    },
    listItemClick(item) {
      console.log(item);
      this.setDocsDetail({ ...item, userName: this.userName });
      if (!item.delFlag) {
        this.$router.push({
          name: "projectPurchaseDetail",
          query: {
            type: "detail",
          },
        });
      } else {
        Toast("该记录已作废,不能进行编辑!");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.project-purchase-list-container {
  background-image: linear-gradient(white, rgb(216, 231, 240));
  .list-container {
    .list-item-container {
      display: flex;
      align-items: center;
      margin: 8px 4px 16px 10px;
      font-size: 16px;
      .list-item-left-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        .list-item-left {
          padding-bottom: 6px;
        }
        .font-small {
          font-size: 12px;
          padding-bottom: 4px;
        }
      }
      .list-item-center-container {
        display: flex;
        flex-direction: column;
        width: 2rem;
        margin-left: 6px;
        font-size: 14px;
        .list-item-center {
          padding: 0.1rem 0;
        }
      }
    }
  }
  .pageContainer {
    margin: 0.1rem;
  }
}
</style>